react native环境配置
参考链接：https://reactnative.cn/docs/next/getting-started.html1，安装node环境，比较简单略2，安装python2：参考文章3，使用npm安装yarn: 但是输入yarn 报错，命令不存在后经查询知，之前的node版本的8.x太低了，所以在node官网下载了最新版10.x再次操作命令行成功，可以正常运行yarn和react-native命令了；4，安装ja...
2024-01-10
react-native 适配问题
const ScreenWidth = Dimensions.get('window').width;static DimensionsTransform(px) { // 设计图纸以750为基准 return px/750*ScreenWidth } ...
2024-01-10
react-native 顶部导航栏
效果图： 项目结构如下： views和下面的页面手动创建环境依赖如下： 步骤下载 react-native-scrollable-tab-view$ npm install react-native-scrollable-tab-view --save编写代码App.jsimport React from 'react';import { Button, Text, View,Scr...
2024-01-10
react-native环境配置
一、Node环境安装下载地址：http://nodejs.cn/download/如果用不到最新特性的话，一般选择稳定版本但是注意，react-native要求：Node 的版本必须大于等于 10我们点击 Windows安装包，下载完成后双击打开，一路next，最后install就好这里推荐将安装路径放在C盘根目录，方便查看内容，当然，个人喜好，也可以默...
2024-01-10
react-native开发总结
项目地址：http://liu12fei08fei.github.io/blog/41react-native.html说明• 项目总结代码地址• 从项目开始启动（2018-07-02）到项目进入测试（2018-08-20）• 从我基本没用过react，到直接上手react-native• 其实从内心我是又爱又怕，爱是我确实很早就像下手除Vue以外的框架，多接触和学习一些不一样的思想；怕是前...
2024-01-10
react native 环境搭建与项目创建
JDK、Node、Python2、Android studio、react-native-cliJDK（必须是1.8版本）下载地址：（点击 Accept License Agreement ）https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 我这里选的是windows64位。下载完成后，得到的是一个 jdk-8u191-windows-x64.exe...
2024-01-10
anu - react
import { options } from "./util";import { Children } from "./Children";import * as eventSystem from "./event";import { PropTypes } from "./PropTypes";import { Component } from "./Component";import { win as window } from "./browser";import { createClass } f...
2024-01-10
前端开发-react-native 项目
快速搭建rn项目步骤：1.命令行指令：npm i react-native-cli -g2.react-native init aaa3.Android Studio 导入创建的aaa项目下的Android文件夹，在安卓模拟机里运行（Android Studio 安装参照官网） 步骤详解 1.安装react native cli 2.react-native init aa(项目名) 3.aa项目下的Android文件夹导入Android Studio 4.运行项目 5.创建模拟机...
2024-01-10
react native 小项目, 持续更新中.....
摸索了 react-native 这么长时间了, 一直都是零零碎碎的写一点东西, 最近在业余时间, 网上扒了一些接口, 抄抄这个页面设计, copy copy 那个设计页面, 总算是写出了一个起码看上去算是个项目的东西. 在这里和大家分享一下. 侵删!!!1.登录模块设计效果:这里的忘记密码页面由于没有找到相应的接口, 所以这...
2024-01-10
iOS 在react-native中嵌入原生悬浮框
本文中使用IOS原生悬浮框：https://github.com/shanghaiMichael/DYYFloatWindow 。1.直接按照RN官网原生模块操作方式添加就可以，原生中开发接口:2.RN中调用：3.添加成功但是出现问题（由于不能上传录制的视频，文字说明）：浮框拖动的时候会在屏幕2个不同位置变换出现，打印问题如图：4.在DYYFloatWindow中把[[...
2024-01-10
【0.44】React Native 中文更新日志
本文为 Marno 原创，转载必须保留出处！公众号 aMarno，关注后回复 RN 加入交流群React Native 优秀开源项目大全：http://www.marno.cn一、导读本次更新亮点：在 IOS 上彻底移除了对 FlatList 进行优化：比如支持固定头部等个人感觉这期更新基本可以忽略了！可以忽略了！可以忽略了！二、重大变化...
2024-01-10
如何在react-native中制作圆形滑块
我想添加一个类似范围的组件。但是实际上是圆形的，我不知道该怎么做。请给我一些帮助。我想要的例子：回答：我最近一直在使用react-native-svg，我认为这太棒了-SVG和React是geek-heaven的完美结合，非常适合创建自定义UI，而无需下拉至本机绘图代码。这是一个CircularSlider实现上述内容的小组件：im...
2024-01-10
探索react native首屏渲染最佳实践
1.前言 react native给了我们使用javascript开发原生app的能力，在使用react native完成兴趣部落安卓端发现tab改造后，我们开始对由react native实现的界面进行持续优化。目标只有一个，在享受react native带来的新特性的同时，在体验上无限逼近原生实现。作为一名前端开发，本文会从前端角度，探索reac...
2024-01-10
react native 生命周期图解和RN开发小记
间断性小记，仅供自己参考，有不对的地方，非常欢迎各位大牛指教^ _ ^小生这厢有礼了〜1. es6 call和apply的区别与用法 有JavaScript的的基础，今天学习ES6过程中遇到的.CALL（）这个东东，很是疑惑。遂查了相关文档，作出以下小结，以备后用。 1，call 状语从句： apply 的英文为了动态改变...
2024-01-10
React native修改state中的数组
今天遇到在react native中修改state中子项为数组的情况，一直赋值不成功，后来查资料发现native中数组是引用，不能直接对引用赋值，查找资料的时候找到了该网页：修改数组项的时候要返回一个新数组，可以用扩展运算符...加上新的项！后来完美解决！感谢网友的强大力量补充：删除state中的数...
2024-01-10
利用react native创建一个天气APP
我们将构建一个实列程序：天气App，（你可以在react native 中创建一个天气应用项目），我们将学习使用并结合可定义模板(stylesheets)、盒式布局(flexbox)、网络通信、用户输入、和图片来构建一个有用的APP，我们可以将它运行在Android或者IOS的设备上。...
2024-01-10
react-native打开一个日期控件
代码：export default class XXX extends Component{constructor(props){super(props);this.tomorrowDate=this.getTomorrow();this.state={chooseDate: this.tomorrowDate.getFullYear()+'-'+ this.tomorrowDate.getMonth()+'-'+ this.tomorrowDate.getDate(),}}reder(){return(<...
2024-01-10
APP开发哪个框架好 也谈react native框架
从最近的研究报告指出，移动电商占据90%以上的份额，市场已由当初的PC为王发生了质的变化。移动端流量入口成了商家的必争之地，app商城成了商家最受欢迎的电商应用，那么商家要如何进行电商app开发、应选用什么框架进行开发呢？1、需求分析要清晰app开发通入最终的使用者是用户，因此用户体...
2024-01-10
react-native使用谷歌浏览器调试
学习交流：https://gitee.com/potato512/Learn_ReactNativereact-native学习交流QQ群：806870562通过 谷歌浏览器Chrome调试React Native程序步骤一：先在模拟器上运行项目步骤二：选中模拟器，同时使用键盘上的组合键"Command + D"打开Developer Menu菜单，并单击选择”Debug JS Remotely"步骤三：在打开的谷歌浏览器里选择开发者...
2024-01-10
react实战 : react 与 svg
有一个需求是这样的。一个组件里若干个区块。区块数量不定。区块里面是一个波浪效果组件，而这个一般用 SVG 做。所以就变成了在 react 中使用 SVG 的问题。首先是波浪效果需要的样式。.p{ font-size: 12px; line-height: 2; text-align: center; margin:0; width: 52px; color: #fff;}.irrigate_svg { height: 52px; widt...
2024-01-10
react setState 的用法
官方推荐的写法：函数式的写法this.setState((prevState) => ({ age: ++ prevState.age}))如果不这样写，因为 setState 是异步的，当疯狂的触发按钮，react会将多个setState合并成一个，这样就导致了，并非每次+1。react 中 s...
2024-01-10
react-native 简天气——仅仅一个天气而已
项目下载项目地址： ihewro/React-Native-WeatherAndroid端APK下载地址： https://www.pgyer.com/simpleWeather IOS端可以直接在模拟器上运行，没有打包欢迎给Star 、fork 、pl~截图IOSAndroid1Android2Android3特色简单，没有任何广告支持全国3000+城市查询白天黑色自动切换背景图片编不下去了 …… 系列笔记...
2024-01-10详解如何在项目中使用jest测试react native组件
目前Javascript的测试工具很多，但是针对React的测试策略，Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址：https://facebook.github.io/jest/。我们可以看到Jest官网宣称的是：Painless JavaScript Testing。是Facebook用于测试服务和React应用程序的JavaScript单元测试框架。所谓单元测试也就是对每个单元进行测试，通...
2024-01-10
react ant design 清除绑定的对象中的一个属性
数据结构 如下let formData = {childList:[{attachMsg ：{image}}]}我想清楚除掉form表单上绑定的attachMsg或者image，但始终清除不掉我是这样绑定的试着这样子清除全都无效点击 表单的提交方法 验证还是会通过，打印value还是存在求问怎么清除回答setFieldsValue({formData:{...formData}})...
2024-01-10
React-native学习-22 - state使用
最近看代码发现，这个状态state定义的位置不是很明确，有时在constructor里，有时在constructor外。特意查了一下。下面是转来的。我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state...
2024-01-10
